<template>
  <div class="school">
    <el-row :gutter="0">
      <el-col :span="6" v-for="(value, index) in schoollist" :key="index">
        <div class="grid-content bg-purple">
          <el-card :body-style="{ padding: '0px' }">
            <div style="padding: 14px">
              <span style="font-size: 20px">{{ value.name }}</span>
              <div style="font-size: 16px">
                <span>入门最低标准：</span>
                <div>灵力：{{ value.join_exp }}</div>
                <div>力量：{{ value.join_str }}</div>
                <div>体质：{{ value.join_def }}</div>
                <div>法力：{{ value.join_mag }}</div>
                <div>速度：{{ value.join_spd }}</div>
                <div>最大生命值：{{ value.join_max_hp }}</div>
                <div>入门费用：{{ value.join_money }}</div>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "school",
  data() {
    return {
        schoollist: []
    };
  },
  created() {
      this.getSchoolInfo();
  },
  computed: {
    user() {
      return this.$store.getters.user;
    },
  },
  methods: {
    getSchoolInfo() {
      // 获取背包数据
      this.$axios
        .get("/api/schools/get")
        .then((res) => {
          this.schoollist = res.data;
          console.log(this.data);
          console.log(this.schoollist);
        })
        .catch((err) => console.log(err));
    },
  },
  components: {},
};
</script>
<style scoped>
.school {
  padding: 2%;
}
</style>